<template>
<!--  查询采购记录头部的组件-->
<div style="display: flex">
  <div >
    <el-button type="text" @click="dialogVisible = true">条件查询选择窗口</el-button>
    <el-dialog
      title="条件查询"
      :visible.sync="dialogVisible"
      width="51%"
      >
      <div style="display: flex;flex-wrap: wrap">
        <div >
          <span style="margin-top: 4px;font-size: 17px">产品大类&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.bigTypeId"  @change="changeBigType" style="width: 150px">
            <el-option
              v-for="item in bigTypeList"
              :key="item.bigTypeId"
              :label="item.bigTypeName"
              :value="item.bigTypeId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 190px">
          <span style="margin-top: 4px;font-size: 17px">库房选择&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.warehouseId" :disabled="msgByOnlyShow" @change="changeWarehouseByShow"  style="width: 150px">
            <el-option

              v-for="item in warehouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 15px">
          <span style="margin-top: 4px;font-size: 17px">产品小类&nbsp;:&nbsp;</span>
          <el-select v-model="selectMsg.smallTypeId" @change="changeSmallType"  style="width: 150px">
            <el-option
              v-for="item in smallTypeList"
              :key="item.smallTypeId"
              :label="item.smallTypeName"
              :value="item.smallTypeId">
            </el-option>
          </el-select>
          </div>

        <div style="margin-top: 15px;margin-left: 185px">
          <span style="margin-top: 4px;font-size: 17px">是否展示库存不足的数据:&nbsp;</span>
          <el-switch  :disabled="msgByOnlyShow || bugMsg"
            v-model="selectMsg.showWarehouse3">
          </el-switch>
        </div>
        <div style="margin-top: 15px;">
          <span style="margin-top: 4px;font-size: 17px">厚度/规格:&nbsp;</span>
          <el-input clearable style="width: 200px" v-model="selectMsg.specification"></el-input>
        </div>
        <div style="margin-top: 15px;margin-left: 117px">
          <span style="margin-top: 4px;font-size: 17px">是否只展示库存不足的数据:&nbsp;</span>
          <el-switch
            @change="changeInventoryWarehouse"
            v-model="selectMsg.showOnlyWarehouse3">
          </el-switch>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button type="danger"   @click="restartMsg">重 填</el-button>
    <el-button type="primary" @click="selectMsgWay">查 询</el-button>
  </span>
    </el-dialog>
  </div>
</div>
</template>

<script>
import {get} from "../../utils/request";
import {INVENTORY_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "SelectByCondition",
  data(){
    return{
      bugMsg:false,
      msgByOnlyShow:false,
      warehouseList:[],
      bigTypeList:[],
      smallTypeList:[],
      dialogVisible: false,
      selectMsg:{
        currentPage:1,
        pageSize:INVENTORY_RECORDING_DATA,
        warehouseId:null,
        bigTypeId:null,
        smallTypeId:null,
        specification:null,
        showWarehouse3:true,
        showOnlyWarehouse3:false
      },
    }
  },
  mounted() {
    get("/api/v1/warehouse/show/select").then(resp=>{
      this.warehouseList=resp.data
      this.warehouseList.unshift({warehouseId: 0,warehouseName:'所有库房',address:'无'})
      this.selectMsg.warehouseId=0
    })
    get("/api/v1/big-type-show").then(resp=>{
      this.bigTypeList=resp.data
      this.bigTypeList.unshift({bigTypeId: 0,bigTypeName:'所有大类',unitId:0})
      this.selectMsg.bigTypeId=0
    })
    get("/api/v1/small-type-show/condition").then(resp=>{
      this.smallTypeList=resp.data
      this.smallTypeList.unshift({smallTypeId: 0,smallTypeName:'所有小类',bigTypeId:0})
      this.selectMsg.smallTypeId=0
    })
  },
  methods:{
    changeInventoryWarehouse(value){
      if (value){
        this.msgByOnlyShow=true

      }else {
        this.msgByOnlyShow=false
      }
    },
    selectMsgWay(){
      this.dialogVisible=false
      this.$emit("selectMsgWay",this.selectMsg)
    },
    restartMsg(){
      this.changeBigType(0);
      this.changeSmallType(0);
      this.selectMsg.warehouseId=0
      this.selectMsg.specification=null
      this.selectMsg.showWarehouse3=true
      this.selectMsg.showOnlyWarehouse3=false
      this.msgByOnlyShow=false
    },
    changeBigType(value){
      if (value!==0){
        get("/api/v1/small-type-show/condition",{bigTypeId:value}).then(resp=>{
          this.smallTypeList=resp.data
          this.smallTypeList.unshift({smallTypeId: 0,smallTypeName:'所有小类',bigTypeId:0})
          this.selectMsg.smallTypeId=0
        })
      }else {
        this.changeSmallType(0)
        get("/api/v1/small-type-show/condition").then(resp=>{
          this.smallTypeList=resp.data
          this.smallTypeList.unshift({smallTypeId: 0,smallTypeName:'所有小类',bigTypeId:0})
          this.selectMsg.smallTypeId=0
        })
      }

    },
    changeWarehouseByShow(value){
       if (value===0){
          this.selectMsg.showWarehouse3=true
         this.bugMsg=false
       }else {
            this.bugMsg=true
           this.selectMsg.showWarehouse3=false
       }
    },
    changeSmallType(value){
      if (value!==0){
        get("/api/v1/big-type-show",{smallTypeId:value}).then(resp=>{
          this.bigTypeList=resp.data
          this.selectMsg.bigTypeId=resp.data[0].bigTypeId;
          this.bigTypeList.unshift({bigTypeId: 0,bigTypeName:'所有大类',unitId:0})
        })
      }else {
        get("/api/v1/big-type-show").then(resp=>{
          this.bigTypeList=resp.data
          this.bigTypeList.unshift({bigTypeId: 0,bigTypeName:'所有大类',unitId:0})
          this.selectMsg.bigTypeId=0
        })
      }

    },
  }
}
</script>

<style scoped>

</style>
